<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>院校分类</title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/index2.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-6 header-set-marin-top">
					<a href="javascript:;" class="set-border">院校分类</a>
				</div>
				<div class="col-md-6 text-right header-set-marin-top">
					<a href="javascript:;" class="set-border" style="margin-right: 20px;">购物车</a>
					<a href="javascript:;" class="set-border">请登录</a>
				</div>
			</div>
			<img src="img/header.jpg" class="col-md-12" style="padding-left: 0;padding-right:0;height: 70px;" />
			
		</div>
		<div class="container"  style="margin-top: 12px;">
			<div class="col-md-2">
				<ul class="classfy">
					<li style="background-color: #01A37E;">图书分类</li>
					<li class="js-classfy"><a href="javascript:;">文学艺术</a></li>
					<li class="js-classfy"><a href="javascript:;">教育</a></li>
					<li class="js-classfy"><a href="javascript:;">人文科技</a></li>
					<li class="js-classfy"><a href="javascript:;">经济</a></li>
					<li class="js-classfy"><a href="javascript:;">生活</a></li>
					<li class="js-classfy"><a href="javascript:;">科学技术</a></li>
					<li class="js-classfy"><a href="javascript:;">医学</a></li>
				</ul>
			</div>
			
			<div class="col-md-8">
				<div class="col-md-3">
					<ul class="classfyDetails js-classfyDetails through" style="top: 0px;">
						<li>
							<ul>
								<li>文学</li>
								<li>文学理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>小说</li>
								<li>小说集</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>传记</li>
								<li>人物自传</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>青春文学</li>
								<li>校园文学</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>艺术</li>
								<li>艺术理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>动漫</li>
								<li>动漫学堂</li>
								<li>……</li>
							</ul>
						</li>
					</ul>
					<ul class="classfyDetails js-classfyDetails through" style="top: 40px;">
						<li>
							<ul>
								<li>文学</li>
								<li>文学理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>小说</li>
								<li>小说集</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>传记</li>
								<li>人物自传</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>青春文学</li>
								<li>校园文学</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>艺术</li>
								<li>艺术理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>动漫</li>
								<li>动漫学堂</li>
								<li>……</li>
							</ul>
						</li>
					</ul>
					<ul class="classfyDetails js-classfyDetails through" style="top: 80px;">
						<li>
							<ul>
								<li>文学</li>
								<li>文学理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>小说</li>
								<li>小说集</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>传记</li>
								<li>人物自传</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>青春文学</li>
								<li>校园文学</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>艺术</li>
								<li>艺术理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>动漫</li>
								<li>动漫学堂</li>
								<li>……</li>
							</ul>
						</li>
					</ul>
					<ul class="classfyDetails js-classfyDetails through" style="top: 120px;">
						<li>
							<ul>
								<li>文学</li>
								<li>文学理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>小说</li>
								<li>小说集</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>传记</li>
								<li>人物自传</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>青春文学</li>
								<li>校园文学</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>艺术</li>
								<li>艺术理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>动漫</li>
								<li>动漫学堂</li>
								<li>……</li>
							</ul>
						</li>
					</ul>
					<ul class="classfyDetails js-classfyDetails through" style="top: 140px;">
						<li>
							<ul>
								<li>文学</li>
								<li>文学理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>小说</li>
								<li>小说集</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>传记</li>
								<li>人物自传</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>青春文学</li>
								<li>校园文学</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>艺术</li>
								<li>艺术理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>动漫</li>
								<li>动漫学堂</li>
								<li>……</li>
							</ul>
						</li>
					</ul>
					<ul class="classfyDetails js-classfyDetails through" style="top: 140px;">
						<li>
							<ul>
								<li>文学</li>
								<li>文学理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>小说</li>
								<li>小说集</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>传记</li>
								<li>人物自传</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>青春文学</li>
								<li>校园文学</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>艺术</li>
								<li>艺术理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>动漫</li>
								<li>动漫学堂</li>
								<li>……</li>
							</ul>
						</li>
					</ul>
					<ul class="classfyDetails js-classfyDetails through" style="top: 140px;">
						<li>
							<ul>
								<li>文学</li>
								<li>文学理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>小说</li>
								<li>小说集</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>传记</li>
								<li>人物自传</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>青春文学</li>
								<li>校园文学</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>艺术</li>
								<li>艺术理论</li>
								<li>……</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>动漫</li>
								<li>动漫学堂</li>
								<li>……</li>
							</ul>
						</li>
					</ul>
					
				</div>
				<div id="myCarousel" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>   
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="img/lunbo1.jpg" alt="First slide">
							<div class="carousel-caption">图书热卖  1</div>
						</div>
						<div class="item">
							<img src="img/lunbo1.jpg" alt="Second slide">
							<div class="carousel-caption">图书热卖  1</div>
						</div>
						<div class="item">
							<img src="img/lunbo1.jpg" alt="Third slide">
							<div class="carousel-caption">图书热卖  1</div>
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control left" href="#myCarousel" 
					   data-slide="prev">&lsaquo;</a>
					<a class="carousel-control right" href="#myCarousel" 
					   data-slide="next">&rsaquo;</a>
				</div> 
			</div>
			<div class="col-md-2" id="gonggao">
				<h4>公告信息</h4>
				<ul id="ulGongao">
					<li>这里填写第一条公告信息，公告信息公告信息这里填写第一条公告信息，公告信息公告信息</li>
					<li>这里填写第一条公告信息，这里填写第一条公告信息，公告信息公告信息</li>
					<li>这里填写第一条公告信息，公告信息公告信息这里填写第一条公告信息，公告信息公告信息</li>
					
				</ul>
			</div>
			<div class="col-md-12 setBgOfContent">
				<p class="col-md-12" id="sumjectClassfy">
					专业分类
				</p>
				<div class="col-md-8" id="sumjectClassfyPic">
					<img src="img/subjectPic1.jpg" class="col-md-4"/>
					<img src="img/subjectPic1.jpg" class="col-md-4"/>
					<img src="img/subjectPic1.jpg" class="col-md-4"/>
					<img src="img/subjectPic1.jpg" class="col-md-4"/>
					<img src="img/subjectPic1.jpg" class="col-md-4"/>
					<img src="img/subjectPic1.jpg" class="col-md-4"/>
				</div>
				<div class="col-md-4">
					<img src="img/subjectAdversity.jpg" class="col-md-12" style="height:290px;padding-left: 8px;padding-right: 7px;"/>
				</div>
			</div>
			<p class="col-md-12" id="sumjectRecommend">
				推荐书籍
			</p>
			<div class="col-md-12 setBgOfContent" style="padding-bottom: 7px;padding-top: 8px;">
				<div class="media col-md-4">
					<div class="media-left">
						<img src="img/book1.jpg" class="recommend-pic" />
					</div>
					<div class="media-body">
						<p class="re-name">计算机编程艺术</p>
						<p class="re-price">￥ 24.30</p>
					</div>
				</div>
				<div class="media col-md-4">
					<div class="media-left">
						<img src="img/book1.jpg" class="recommend-pic" />
					</div>
					<div class="media-body">
						<p class="re-name">计算机编程艺术</p>
						<p class="re-price">￥ 24.30</p>
					</div>
				</div>
				<div class="media col-md-4">
					<div class="media-left">
						<img src="img/book1.jpg" class="recommend-pic" />
					</div>
					<div class="media-body">
						<p class="re-name">计算机编程艺术</p>
						<p class="re-price">￥ 24.30</p>
					</div>
				</div>
				
			</div>
		</div>
		<div id="footer" class="col-md-12">
			<div class="col-md-12" id="footer1">
				<div class="col-md-4 text-center">
					<img src="img/bottom3.png" />
					<span>安全放心的服务</span>
				</div>
				<div class="col-md-4 text-center">
					<img src="img/bottom1.png" />
					<span>一流的团队</span>
				</div>
				<div class="col-md-4 text-center">
					<img src="img/bottom2.png" />
					<span>高效的处理机制</span>
				</div>
			</div>
			<div class="col-md-12 text-center" id="contents" style="color: #6F6966;">
				<span>关于我们</span>|
				<span>帮助中心</span>|
				<span>意见反馈</span>|
				<span>联系方式</span>|
				<span>账号申诉</span>|
				<span>黄牛举报</span>|
				<span>友情链接</span>
			</div>
			<p class="col-md-12 text-center" style="color: #6F6966;">&copy;2017 youhaocuda.com All rights ergiui by Youhaosuda.</p>
			
		</div>
		<script>
			$('.carousel').carousel({interval: 3000});
			$(".js-classfy").hover(function(){
				$(".js-classfyDetails").eq($(this).index()).fadeIn();
			},function(){
				$(".js-classfyDetails").eq($(this).index()).hide();
			});
		</script>
	</body>
</html>
